import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

/**
 * 设备列表项组件
 * 显示设备信息和操作按钮
 */
Rectangle {
    id: root
    
    // ========================================
    // 公开属性（从 DeviceModel 接收数据）
    // ========================================
    property string deviceId: ""
    property string deviceName: "未命名设备"
    property string ipAddress: "0.0.0.0"
    property int port: 502
    property int slaveId: 1
    property string status: "offline"  // online, offline, error
    property string lastUpdate: ""
    property string description: ""
    
    // ========================================
    // 信号
    // ========================================
    signal connectClicked()
    signal disconnectClicked()
    signal editClicked()
    signal deleteClicked()
    signal viewDataClicked()
    
    // ========================================
    // 组件样式
    // ========================================
    height: 100
    radius: 8
    color: status === "online" ? "#f0fdf4" : "#fafafa"
    border.width: 2
    border.color: status === "online" ? "#10b981" : "#e5e7eb"
    
    // 悬停效果
    MouseArea {
        id: hoverArea
        anchors.fill: parent
        hoverEnabled: true
        propagateComposedEvents: true
        
        onEntered: {
            root.border.color = "#3b82f6"
        }
        onExited: {
            root.border.color = status === "online" ? "#10b981" : "#e5e7eb"
        }
    }
    
    // 悬停时的阴影效果
    Behavior on border.color {
        ColorAnimation { duration: 200 }
    }
    
    // ========================================
    // 主布局
    // ========================================
    RowLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20
        
        // 左侧：状态指示器
        DeviceStatus {
            status: root.status
            size: 20
            showText: false
            showAnimation: true
            Layout.alignment: Qt.AlignVCenter
        }
        
        // 中间：设备信息
        ColumnLayout {
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignVCenter
            spacing: 8
            
            // 设备名称
            Text {
                text: root.deviceName
                font.pixelSize: 18
                font.bold: true
                color: "#333"
                Layout.fillWidth: true
            }
            
            // 设备详细信息
            RowLayout {
                spacing: 20
                Layout.fillWidth: true
                
                // IP 地址
                Row {
                    spacing: 5
                    
                    Text {
                        text: "🌐"
                        font.pixelSize: 12
                    }
                    
                    Text {
                        text: root.ipAddress + ":" + root.port
                        font.pixelSize: 14
                        color: "#666"
                    }
                }
                
                // 从站 ID
                Row {
                    spacing: 5
                    
                    Text {
                        text: "🔧"
                        font.pixelSize: 12
                    }
                    
                    Text {
                        text: "从站 " + root.slaveId
                        font.pixelSize: 14
                        color: "#666"
                    }
                }
                
                // 设备 ID
                Row {
                    spacing: 5
                    
                    Text {
                        text: "🏷️"
                        font.pixelSize: 12
                    }
                    
                    Text {
                        text: root.deviceId
                        font.pixelSize: 14
                        color: "#666"
                    }
                }
                
                // 最后更新时间（如果在线）
                Row {
                    visible: root.status === "online" && root.lastUpdate !== ""
                    spacing: 5
                    
                    Text {
                        text: "🕒"
                        font.pixelSize: 12
                    }
                    
                    Text {
                        text: root.lastUpdate
                        font.pixelSize: 12
                        color: "#999"
                    }
                }
                
                Item { Layout.fillWidth: true }
            }
        }
        
        // 右侧：操作按钮
        RowLayout {
            spacing: 10
            Layout.alignment: Qt.AlignVCenter
            
            // 连接/断开按钮
            Button {
                visible: root.status === "offline" || root.status === "error"
                text: "连接"
                
                Layout.preferredWidth: 80
                Layout.preferredHeight: 36
                
                background: Rectangle {
                    color: parent.hovered ? "#059669" : "#10b981"
                    radius: 6
                    
                    Behavior on color {
                        ColorAnimation { duration: 150 }
                    }
                }
                
                contentItem: Text {
                    text: parent.text
                    font.pixelSize: 14
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
                
                onClicked: root.connectClicked()
            }
            
            Button {
                visible: root.status === "online"
                text: "断开"
                
                Layout.preferredWidth: 80
                Layout.preferredHeight: 36
                
                background: Rectangle {
                    color: parent.hovered ? "#d97706" : "#f59e0b"
                    radius: 6
                    
                    Behavior on color {
                        ColorAnimation { duration: 150 }
                    }
                }
                
                contentItem: Text {
                    text: parent.text
                    font.pixelSize: 14
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
                
                onClicked: root.disconnectClicked()
            }
            
            // 查看数据按钮
            Button {
                visible: root.status === "online"
                text: "查看数据"
                
                Layout.preferredWidth: 90
                Layout.preferredHeight: 36
                
                background: Rectangle {
                    color: parent.hovered ? "#2563eb" : "white"
                    border.color: "#3b82f6"
                    border.width: 1
                    radius: 6
                    
                    Behavior on color {
                        ColorAnimation { duration: 150 }
                    }
                }
                
                contentItem: Text {
                    text: parent.text
                    font.pixelSize: 14
                    color: parent.parent.hovered ? "white" : "#3b82f6"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    
                    Behavior on color {
                        ColorAnimation { duration: 150 }
                    }
                }
                
                onClicked: root.viewDataClicked()
            }
            
            // 编辑按钮
            Button {
                text: "✏️"
                
                Layout.preferredWidth: 40
                Layout.preferredHeight: 36
                
                ToolTip.visible: hovered
                ToolTip.text: "编辑设备"
                ToolTip.delay: 500
                
                background: Rectangle {
                    color: parent.hovered ? "#f3f4f6" : "white"
                    border.color: "#d1d5db"
                    border.width: 1
                    radius: 6
                    
                    Behavior on color {
                        ColorAnimation { duration: 150 }
                    }
                }
                
                contentItem: Text {
                    text: parent.text
                    font.pixelSize: 16
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
                
                onClicked: root.editClicked()
            }
            
            // 删除按钮
            Button {
                text: "🗑️"
                
                Layout.preferredWidth: 40
                Layout.preferredHeight: 36
                
                ToolTip.visible: hovered
                ToolTip.text: "删除设备"
                ToolTip.delay: 500
                
                background: Rectangle {
                    color: parent.hovered ? "#fee2e2" : "white"
                    border.color: parent.hovered ? "#ef4444" : "#d1d5db"
                    border.width: 1
                    radius: 6
                    
                    Behavior on color {
                        ColorAnimation { duration: 150 }
                    }
                }
                
                contentItem: Text {
                    text: parent.text
                    font.pixelSize: 16
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
                
                onClicked: root.deleteClicked()
            }
        }
    }
    
    // 描述信息（可选，收起状态）
    Rectangle {
        visible: root.description !== ""
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        height: 1
        color: "#e5e7eb"
    }
}

